<template>
  <view class="payment-container">
    <!-- 左上角返回按钮 -->
    <view class="back-btn" @click="goBack">
      <image src="/static/back-icon.png" mode="aspectFit"></image>
    </view>

    <!-- 支付界面内容 -->
    <view class="payment-content">
      <text class="payment-title">支付界面</text>
      <text class="payment-amount">支付金额: ¥100.00</text>
      <button class="select-payment-btn" @click="showDrawer = true">选择支付方式</button>
    </view>

    <!-- 从下往上弹出的抽屉 -->
    <view 
      class="drawer" 
      :class="{ 'drawer-show': showDrawer }"
      @click="closeDrawer"
    >
      <view class="drawer-content" @click.stop>
        <view class="payment-options">
          <view class="payment-option" @click="selectPayment('alipay')">
            <image src="/static/gallery.png" mode="aspectFit"></image>
            <text>支付宝支付</text>
          </view>
          <view class="payment-option" @click="selectPayment('wechat')">
            <image src="/static/gallery.png" mode="aspectFit"></image>
            <text>微信支付</text>
          </view>
          <view class="payment-option" @click="selectPayment('bank')">
            <image src="/static/gallery.png" mode="aspectFit"></image>
            <text>银行卡支付</text>
          </view>
          <view class="payment-option" @click="selectPayment('unionpay')">
            <image src="/static/gallery.png" mode="aspectFit"></image>
            <text>云闪付</text>
          </view>
          <view class="payment-option cancel" @click="closeDrawer">
            <text>取消</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showDrawer: true // 控制抽屉显示隐藏
    };
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.back();
    },
    // 关闭抽屉
    closeDrawer() {
      this.showDrawer = false;
    },
    // 选择支付方式
    selectPayment(type) {
      uni.showToast({
        title: `选择了${type === 'alipay' ? '支付宝' : type === 'wechat' ? '微信' : type === 'bank' ? '银行卡' : '云闪付'}支付`,
        icon: 'none'
      });
      this.closeDrawer();
    }
  }
};
</script>

<style scoped>
.payment-container {
  height: 100vh;
  position: relative;
}

.back-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 30px;
  height: 30px;
  z-index: 10;
}

.back-btn image {
  width: 100%;
  height: 100%;
}

.payment-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80px;
}

.payment-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.payment-amount {
  font-size: 20px;
  color: #e64340;
  margin-bottom: 30px;
}

.select-payment-btn {
  background-color: #007AFF;
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
}

.drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}

.drawer-show {
  opacity: 1;
  visibility: visible;
}

.drawer-content {
  background-color: white;
  width: 100%;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 20px;
  transform: translateY(100%);
  transition: transform 0.3s;
}

.drawer-show .drawer-content {
  transform: translateY(0);
}

.payment-options {
  display: flex;
  flex-direction: column;
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
   justify-content: center; 
}

.payment-option image {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.payment-option text {
  font-size: 16px;
}

.payment-option.cancel {
  justify-content: center;
  border-bottom: none;
  margin-top: 10px;
  color: #e64340;
}
</style>